<template>
  <div class="down_body">
    <Title text="下载进度条" />
    <div class="common_box">
      <Progress :percent="this.progress1 || 0" />
      <p>{{ sizeCover(this.size1) }}</p>
      <a-button size="small" @click="download(url1, 1)">下载1</a-button>
    </div>
    <div class="common_box">
      <Progress :percent="this.progress2 || 0" />
      <p>{{ sizeCover(this.size2) }}</p>
      <a-button size="small" @click="download(url2, 2)">下载2</a-button>
    </div>
  </div>
</template>
<script>
import Title from "@/components/common/Title";
import { Button, Progress } from "ant-design-vue";
import { unitConver } from "@/utils";
import { downFileCommon } from "@/utils/download";
export default {
  name: "DownLoadFile",
  components: {
    Title,
    AButton: Button,
    Progress
  },
  data() {
    return {
      url1: "/api/uploads/soft/2108/2-210P2135407.rar",
      url2: "/api/uploads/soft/2001/1-200121232528.zip",
      progress1: 0,
      progress2: 0,
      size1: 0,
      size2: 0
    };
  },
  mounted() {
    console.log("this.data", this);
  },
  methods: {
    proLine(evt, num) {
      this.$data["progress" + num] = parseInt((evt.loaded / evt.total) * 100);
      this.$data["size" + num] = evt.total;
    },
    download(url, num) {
      downFileCommon(url, null, "get", null, null, this.proLine, num);
    }
  },
  computed: {
    sizeCover() {
      return function(data) {
        return unitConver(data);
      };
    }
  }
};
</script>
<style scoped>
.down_body {
  width: 50%;
}
</style>
